<template>
	<div class="app-container">
		<!-- 顶部导航栏 -->
		<header class="header">
			<div class="logo">
				<svg class="logo-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				校园运动会管理系统
			</div>
			<div class="flex-grow"></div>
			<div class="flex items-center gap-6">
				<div class="flex items-center gap-2">
					<img id="img-head" src="img/jstu1.webp" alt="用户头像">
					<span class="text-white text-sm">{{ currentUser?.realName || '管理员' }}</span>
				</div>
				<div class="flex items-center gap-2">
					<a href="javascript:void(0)" class="denglu" @click="handleLogout">
						<svg class="logout-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<polyline points="16 17 21 12 16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="21" y1="12" x2="9" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						退出登录
					</a>
				</div>
			</div>
		</header>

		<!-- 左侧导航栏 -->
		<nav class="sidebar">
			<div class="menu-item" :class="{ active: $route.path === '/admin' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<rect x="3" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="14" y="3" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="14" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/>
					<rect x="3" y="14" width="7" height="7" stroke="currentColor" stroke-width="2"/>
				</svg>
				<a @click="$router.push('/admin')">系统管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/users' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
					<circle cx="9" cy="7" r="4"></circle>
					<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
					<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
				</svg>
				<a @click="$router.push('/admin/users')">用户管理</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/operation-logs' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M3 3v5h5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<path d="M12 7v5l4 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/operation-logs')">操作日志</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/exception-handlings' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="12" cy="12" r="10"></circle>
					<line x1="12" y1="8" x2="12" y2="12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<line x1="12" y1="16" x2="12.01" y2="16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/exception-handlings')">异常处理</a>
			</div>
			<div class="menu-item active">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<line x1="18" y1="20" x2="18" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<line x1="12" y1="20" x2="12" y2="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<line x1="6" y1="20" x2="6" y2="14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				统计分析
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/system-config' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<circle cx="12" cy="12" r="3"></circle>
					<path d="M12 1v6m0 6v6m4.22-13.22l4.24 4.24M1.54 9.54l4.24 4.24M1.54 14.46l4.24-4.24M18.46 14.46l4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/system-config')">系统配置</a>
			</div>
			<div class="menu-item" :class="{ active: $route.path === '/admin/backup' }">
				<svg class="menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<polyline points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
				</svg>
				<a @click="$router.push('/admin/backup')">数据备份</a>
			</div>
		</nav>

		<!-- 主要内容 -->
		<main class="content">
			<div class="main-content-header">
				<h1 class="text-2xl font-medium">异常统计分析</h1>
				<div class="header-actions">
					<el-button type="primary" size="small" @click="handleBack">
						<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M21 11H5M21 11l-7-7M21 11l-7 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						返回列表
					</el-button>
					<el-button type="success" size="small" @click="handleExportReport">
						<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
							<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<polyline points="7 10 12 15 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							<line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
						</svg>
						导出报告
					</el-button>
				</div>
			</div>

			<!-- 时间范围选择 -->
			<div class="time-range-selector">
				<el-card shadow="never">
					<div class="range-controls">
						<span class="range-label">时间范围：</span>
						<el-radio-group v-model="timeRange" @change="handleTimeRangeChange" size="small">
							<el-radio-button label="today">今日</el-radio-button>
							<el-radio-button label="week">本周</el-radio-button>
							<el-radio-button label="month">本月</el-radio-button>
							<el-radio-button label="quarter">本季度</el-radio-button>
							<el-radio-button label="year">本年</el-radio-button>
						</el-radio-group>
						<el-date-picker
							v-model="customTimeRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							format="YYYY-MM-DD"
							value-format="YYYY-MM-DD"
							@change="handleCustomTimeRangeChange"
							size="small"
							style="margin-left: 20px;">
						</el-date-picker>
						<el-button type="primary" size="small" @click="refreshData" :loading="loading">
							<svg class="btn-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<polyline points="23 4 23 10 17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								<path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
							刷新数据
						</el-button>
					</div>
				</el-card>
			</div>

			<!-- 统计概览卡片 -->
			<div class="overview-cards">
				<el-row :gutter="20">
					<el-col :span="6">
						<el-card shadow="hover" class="overview-card">
							<div class="card-content">
								<div class="card-icon danger">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<line x1="12" y1="9" x2="12" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<line x1="12" y1="17" x2="12.01" y2="17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="card-info">
									<div class="card-value">{{ overview.totalCount || 0 }}</div>
									<div class="card-label">异常总数</div>
									<div class="card-trend" :class="{ 'up': overview.totalTrend > 0, 'down': overview.totalTrend < 0 }">
										<svg v-if="overview.totalTrend > 0" class="trend-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<polyline points="23 18 13.5 8.5 8.5 13.5 1 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<polyline points="17 18 23 18 23 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
										<svg v-else class="trend-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<polyline points="23 6 13.5 15.5 8.5 10.5 1 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<polyline points="17 6 23 6 23 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
										{{ Math.abs(overview.totalTrend) || 0 }}%
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="overview-card">
							<div class="card-content">
								<div class="card-icon warning">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<circle cx="12" cy="12" r="10"></circle>
										<polyline points="12 6 12 12 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="card-info">
									<div class="card-value">{{ overview.unhandledCount || 0 }}</div>
									<div class="card-label">未处理异常</div>
									<div class="card-trend" :class="{ 'up': overview.unhandledTrend > 0, 'down': overview.unhandledTrend < 0 }">
										<svg v-if="overview.unhandledTrend > 0" class="trend-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<polyline points="23 18 13.5 8.5 8.5 13.5 1 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<polyline points="17 18 23 18 23 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
										<svg v-else class="trend-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<polyline points="23 6 13.5 15.5 8.5 10.5 1 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<polyline points="17 6 23 6 23 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
										{{ Math.abs(overview.unhandledTrend) || 0 }}%
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="overview-card">
							<div class="card-content">
								<div class="card-icon success">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										<polyline points="22 4 12 14.01 9 11.01" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="card-info">
									<div class="card-value">{{ overview.handledCount || 0 }}</div>
									<div class="card-label">已处理异常</div>
									<div class="card-trend" :class="{ 'up': overview.handledTrend > 0, 'down': overview.handledTrend < 0 }">
										<svg v-if="overview.handledTrend > 0" class="trend-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<polyline points="23 18 13.5 8.5 8.5 13.5 1 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<polyline points="17 18 23 18 23 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
										<svg v-else class="trend-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<polyline points="23 6 13.5 15.5 8.5 10.5 1 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<polyline points="17 6 23 6 23 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
										{{ Math.abs(overview.handledTrend) || 0 }}%
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card shadow="hover" class="overview-card">
							<div class="card-content">
								<div class="card-icon info">
									<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<circle cx="12" cy="12" r="10"></circle>
										<polyline points="12 6 12 12 16 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
									</svg>
								</div>
								<div class="card-info">
									<div class="card-value">{{ overview.avgHandleTime || 0 }}h</div>
									<div class="card-label">平均处理时间</div>
									<div class="card-trend" :class="{ 'up': overview.handleTimeTrend > 0, 'down': overview.handleTimeTrend < 0 }">
										<svg v-if="overview.handleTimeTrend > 0" class="trend-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<polyline points="23 18 13.5 8.5 8.5 13.5 1 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<polyline points="17 18 23 18 23 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
										<svg v-else class="trend-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<polyline points="23 6 13.5 15.5 8.5 10.5 1 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
											<polyline points="17 6 23 6 23 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
										</svg>
										{{ Math.abs(overview.handleTimeTrend) || 0 }}%
									</div>
								</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>

			<!-- 图表区域 -->
			<div class="charts-container">
				<el-row :gutter="20">
					<!-- 异常趋势图 -->
					<el-col :span="12">
						<el-card shadow="hover" class="chart-card">
							<template #header>
								<div class="chart-header">
									<span>异常趋势分析</span>
									<el-radio-group v-model="trendChartType" size="mini">
										<el-radio-button label="count">数量趋势</el-radio-button>
										<el-radio-button label="level">级别趋势</el-radio-button>
									</el-radio-group>
								</div>
							</template>
							<div ref="trendChart" class="chart"></div>
						</el-card>
					</el-col>

					<!-- 异常类型分布 -->
					<el-col :span="12">
						<el-card shadow="hover" class="chart-card">
							<template #header>
								<div class="chart-header">
									<span>异常类型分布</span>
									<el-radio-group v-model="typeChartType" size="mini">
										<el-radio-button label="pie">饼图</el-radio-button>
										<el-radio-button label="bar">柱状图</el-radio-button>
									</el-radio-group>
								</div>
							</template>
							<div ref="typeChart" class="chart"></div>
						</el-card>
					</el-col>
				</el-row>

				<el-row :gutter="20" style="margin-top: 20px;">
					<!-- 异常级别统计 -->
					<el-col :span="12">
						<el-card shadow="hover" class="chart-card">
							<template #header>
								<div class="chart-header">
									<span>异常级别统计</span>
								</div>
							</template>
							<div ref="levelChart" class="chart"></div>
						</el-card>
					</el-col>

					<!-- 处理效率分析 -->
					<el-col :span="12">
						<el-card shadow="hover" class="chart-card">
							<template #header>
								<div class="chart-header">
									<span>处理效率分析</span>
								</div>
							</template>
							<div ref="efficiencyChart" class="chart"></div>
						</el-card>
					</el-col>
				</el-row>

				<el-row :gutter="20" style="margin-top: 20px;">
					<!-- 模块异常统计 -->
					<el-col :span="12">
						<el-card shadow="hover" class="chart-card">
							<template #header>
								<div class="chart-header">
									<span>模块异常统计</span>
								</div>
							</template>
							<div ref="moduleChart" class="chart"></div>
						</el-card>
					</el-col>

					<!-- 关键词云图 -->
					<el-col :span="12">
						<el-card shadow="hover" class="chart-card">
							<template #header>
								<div class="chart-header">
									<span>异常关键词</span>
								</div>
							</template>
							<div ref="keywordChart" class="chart"></div>
						</el-card>
					</el-col>
				</el-row>
			</div>

			<!-- 详细数据表格 -->
			<div class="data-table">
				<el-card shadow="hover">
					<template #header>
						<div class="table-header">
							<span>异常统计详情</span>
							<el-button type="text" @click="toggleTableExpand">
								{{ tableExpanded ? '收起' : '展开' }}
								<svg v-if="tableExpanded" class="btn-icon-small" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<polyline points="18 15 12 9 6 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
								<svg v-else class="btn-icon-small" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
									<polyline points="6 9 12 15 18 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
							</el-button>
						</div>
					</template>
					<el-table
						:data="statisticsData"
						v-loading="loading"
						stripe
						border
						v-show="tableExpanded">
						<el-table-column prop="date" label="日期" width="120" align="center"></el-table-column>
						<el-table-column prop="totalCount" label="异常总数" width="100" align="center"></el-table-column>
						<el-table-column prop="systemCount" label="系统异常" width="100" align="center"></el-table-column>
						<el-table-column prop="businessCount" label="业务异常" width="100" align="center"></el-table-column>
						<el-table-column prop="parameterCount" label="参数异常" width="100" align="center"></el-table-column>
						<el-table-column prop="permissionCount" label="权限异常" width="100" align="center"></el-table-column>
						<el-table-column prop="databaseCount" label="数据库异常" width="120" align="center"></el-table-column>
						<el-table-column prop="networkCount" label="网络异常" width="100" align="center"></el-table-column>
						<el-table-column prop="fileCount" label="文件异常" width="100" align="center"></el-table-column>
						<el-table-column prop="otherCount" label="其他异常" width="100" align="center"></el-table-column>
						<el-table-column prop="handledCount" label="已处理" width="100" align="center"></el-table-column>
						<el-table-column prop="unhandledCount" label="未处理" width="100" align="center"></el-table-column>
						<el-table-column prop="handlingRate" label="处理率" width="100" align="center">
							<template #default="scope">
								<el-progress
									:percentage="scope.row.handlingRate"
									:color="getProgressColor(scope.row.handlingRate)"
									:stroke-width="6">
								</el-progress>
							</template>
						</el-table-column>
					</el-table>
				</el-card>
			</div>
		</main>
	</div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted, nextTick, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
	getExceptionHandlingStatistics,
	getExceptionTypeStatistics,
	getExceptionLevelStatistics,
	getExceptionTrendStatistics,
	getHandlingEfficiencyStatistics,
	getExceptionKeywordStatistics,
	getModuleExceptionStatistics,
	getExceptionHandlingReport
} from '@/api/exceptionHandling'
import * as echarts from 'echarts'

export default {
	name: 'ExceptionHandlingStatistics',
	setup() {
		// 响应式数据
		const currentUser = ref(null)
		const loading = ref(false)
		const statisticsData = ref([])
		const tableExpanded = ref(false)
		const timeRange = ref('week')
		const customTimeRange = ref(null)
		const trendChartType = ref('count')
		const typeChartType = ref('pie')

		// 统计概览
		const overview = reactive({
			totalCount: 0,
			unhandledCount: 0,
			handledCount: 0,
			avgHandleTime: 0,
			totalTrend: 0,
			unhandledTrend: 0,
			handledTrend: 0,
			handleTimeTrend: 0
		})

		// 图表实例
		const charts = reactive({
			trend: null,
			type: null,
			level: null,
			efficiency: null,
			module: null,
			keyword: null
		})

		// 图表引用
		const trendChart = ref(null)
		const typeChart = ref(null)
		const levelChart = ref(null)
		const efficiencyChart = ref(null)
		const moduleChart = ref(null)
		const keywordChart = ref(null)

		// 生命周期钩子
		onMounted(() => {
			// 获取当前用户信息
			currentUser.value = JSON.parse(localStorage.getItem('user')) || {}
			// 加载数据
			loadData()
			// 初始化图表
			nextTick(() => {
				initCharts()
			})
		})

		onUnmounted(() => {
			// 销毁图表实例
			Object.values(charts).forEach(chart => {
				if (chart) {
					chart.dispose()
				}
			})
		})

		// 加载数据
		const loadData = async () => {
			loading.value = true
			try {
				// 获取统计概览
				const overviewResponse = await getExceptionHandlingStatistics(getTimeRangeParams())
				if (overviewResponse.code === 200) {
					Object.assign(overview, overviewResponse.data)
				}

				// 获取异常趋势数据
				const trendResponse = await getExceptionTrendStatistics(timeRange.value)
				if (trendResponse.code === 200) {
					updateTrendChart(trendResponse.data)
				}

				// 获取异常类型分布
				const typeResponse = await getExceptionTypeStatistics(timeRange.value)
				if (typeResponse.code === 200) {
					updateTypeChart(typeResponse.data)
				}

				// 获取异常级别统计
				const levelResponse = await getExceptionLevelStatistics(timeRange.value)
				if (levelResponse.code === 200) {
					updateLevelChart(levelResponse.data)
				}

				// 获取处理效率分析
				const efficiencyResponse = await getHandlingEfficiencyStatistics(timeRange.value)
				if (efficiencyResponse.code === 200) {
					updateEfficiencyChart(efficiencyResponse.data)
				}

				// 获取模块异常统计
				const moduleResponse = await getModuleExceptionStatistics(timeRange.value)
				if (moduleResponse.code === 200) {
					updateModuleChart(moduleResponse.data)
				}

				// 获取关键词统计
				const keywordResponse = await getExceptionKeywordStatistics(timeRange.value)
				if (keywordResponse.code === 200) {
					updateKeywordChart(keywordResponse.data)
				}

				// 获取详细统计数据
				const detailResponse = await getExceptionHandlingStatistics(getTimeRangeParams())
				if (detailResponse.code === 200 && detailResponse.data.details) {
					statisticsData.value = detailResponse.data.details
				}
			} catch (error) {
				console.error('获取统计数据失败:', error)
				ElMessage.error('获取统计数据失败')
			} finally {
				loading.value = false
			}
		}

		// 初始化图表
		const initCharts = () => {
			// 初始化趋势图表
			charts.trend = echarts.init(trendChart.value)
			// 初始化类型图表
			charts.type = echarts.init(typeChart.value)
			// 初始化级别图表
			charts.level = echarts.init(levelChart.value)
			// 初始化效率图表
			charts.efficiency = echarts.init(efficiencyChart.value)
			// 初始化模块图表
			charts.module = echarts.init(moduleChart.value)
			// 初始化关键词图表
			charts.keyword = echarts.init(keywordChart.value)

			// 监听窗口大小变化
			window.addEventListener('resize', handleResize)
		}

		// 更新趋势图表
		const updateTrendChart = (data) => {
			if (!charts.trend) return

			const option = {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['异常总数', '已处理', '未处理']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: data.dates || []
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '异常总数',
						type: 'line',
						smooth: true,
						data: data.totalCounts || [],
						itemStyle: {
							color: '#5470c6'
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: 'rgba(84, 112, 198, 0.3)' },
								{ offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
							])
						}
					},
					{
						name: '已处理',
						type: 'line',
						smooth: true,
						data: data.handledCounts || [],
						itemStyle: {
							color: '#91cc75'
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: 'rgba(145, 204, 117, 0.3)' },
								{ offset: 1, color: 'rgba(145, 204, 117, 0.1)' }
							])
						}
					},
					{
						name: '未处理',
						type: 'line',
						smooth: true,
						data: data.unhandledCounts || [],
						itemStyle: {
							color: '#fac858'
						},
						areaStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: 'rgba(250, 200, 88, 0.3)' },
								{ offset: 1, color: 'rgba(250, 200, 88, 0.1)' }
							])
						}
					}
				]
			}

			charts.trend.setOption(option)
		}

		// 更新类型图表
		const updateTypeChart = (data) => {
			if (!charts.type) return

			const option = typeChartType.value === 'pie' ? {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 10,
					data: data.types || []
				},
				series: [
					{
						name: '异常类型',
						type: 'pie',
						radius: ['50%', '70%'],
						avoidLabelOverlap: false,
						label: {
							show: false,
							position: 'center'
						},
						emphasis: {
							label: {
								show: true,
								fontSize: '18',
								fontWeight: 'bold'
							}
						},
						labelLine: {
							show: false
						},
						data: data.typeData || []
					}
				]
			} : {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: data.types || [],
					axisLabel: {
						interval: 0,
						rotate: 45
					}
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						name: '异常数量',
						type: 'bar',
						data: data.counts || [],
						itemStyle: {
							color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
								{ offset: 0, color: '#83bff6' },
								{ offset: 0.5, color: '#188df0' },
								{ offset: 1, color: '#188df0' }
							])
						}
					}
				]
			}

			charts.type.setOption(option)
		}

		// 更新级别图表
		const updateLevelChart = (data) => {
			if (!charts.level) return

			const option = {
				tooltip: {
					trigger: 'item',
					formatter: '{a} <br/>{b}: {c} ({d}%)'
				},
				legend: {
					orient: 'vertical',
					left: 10,
					data: ['低', '中', '高', '严重']
				},
				series: [
					{
						name: '异常级别',
						type: 'pie',
						radius: '50%',
						data: [
							{ value: data.low || 0, name: '低' },
							{ value: data.medium || 0, name: '中' },
							{ value: data.high || 0, name: '高' },
							{ value: data.critical || 0, name: '严重' }
						],
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			}

			charts.level.setOption(option)
		}

		// 更新效率图表
		const updateEfficiencyChart = (data) => {
			if (!charts.efficiency) return

			const option = {
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['平均处理时间(h)', '处理率(%)']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: data.dates || []
				},
				yAxis: [
					{
						type: 'value',
						name: '时间(h)',
						position: 'left'
					},
					{
						type: 'value',
						name: '处理率(%)',
						position: 'right'
					}
				],
				series: [
					{
						name: '平均处理时间(h)',
						type: 'line',
						yAxisIndex: 0,
						data: data.avgHandleTimes || []
					},
					{
						name: '处理率(%)',
						type: 'line',
						yAxisIndex: 1,
						data: data.handlingRates || []
					}
				]
			}

			charts.efficiency.setOption(option)
		}

		// 更新模块图表
		const updateModuleChart = (data) => {
			if (!charts.module) return

			const option = {
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value'
				},
				yAxis: {
					type: 'category',
					data: data.modules || []
				},
				series: [
					{
						name: '异常数量',
						type: 'bar',
						data: data.counts || []
					}
				]
			}

			charts.module.setOption(option)
		}

		// 更新关键词图表
		const updateKeywordChart = (data) => {
			if (!charts.keyword) return

			const option = {
				tooltip: {
					trigger: 'item'
				},
				series: [
					{
						type: 'wordCloud',
						shape: 'circle',
						sizeRange: [12, 60],
						rotationRange: [-90, 90],
						rotationStep: 45,
						gridSize: 8,
						drawOutOfBound: false,
						data: data.keywords || []
					}
				]
			}

			charts.keyword.setOption(option)
		}

		// 处理时间范围变化
		const handleTimeRangeChange = () => {
			customTimeRange.value = null
			loadData()
		}

		// 处理自定义时间范围变化
		const handleCustomTimeRangeChange = () => {
			if (customTimeRange.value && customTimeRange.value.length === 2) {
				timeRange.value = 'custom'
				loadData()
			}
		}

		// 获取时间范围参数
		const getTimeRangeParams = () => {
			const params = { timeRange: timeRange.value }
			if (customTimeRange.value && customTimeRange.value.length === 2) {
				params.startTime = customTimeRange.value[0]
				params.endTime = customTimeRange.value[1]
			}
			return params
		}

		// 刷新数据
		const refreshData = () => {
			loadData()
		}

		// 切换表格展开状态
		const toggleTableExpand = () => {
			tableExpanded.value = !tableExpanded.value
		}

		// 返回列表
		const handleBack = () => {
			window.location.href = '/admin/exception-handlings'
		}

		// 导出报告
		const handleExportReport = async () => {
			try {
				const response = await getExceptionHandlingReport(getTimeRangeParams())

				// 创建下载链接
				const blob = new Blob([response], { type: 'application/pdf' })
				const url = window.URL.createObjectURL(blob)
				const link = document.createElement('a')
				link.href = url
				link.download = `异常分析报告_${new Date().toLocaleDateString('zh-CN')}.pdf`
				document.body.appendChild(link)
				link.click()
				document.body.removeChild(link)
				window.URL.revokeObjectURL(url)

				ElMessage.success('报告导出成功')
			} catch (error) {
				console.error('导出报告失败:', error)
				ElMessage.error('导出报告失败')
			}
		}

		// 退出登录
		const handleLogout = () => {
			ElMessageBox.confirm('确定要退出登录吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				// 清除用户信息
				localStorage.removeItem('user')
				localStorage.removeItem('token')
				// 跳转到登录页
				window.location.href = '/login'
			})
		}

		// 获取进度条颜色
		const getProgressColor = (percentage) => {
			if (percentage >= 80) return '#67C23A'
			if (percentage >= 60) return '#E6A23C'
			return '#F56C6C'
		}

		// 处理窗口大小变化
		const handleResize = () => {
			Object.values(charts).forEach(chart => {
				if (chart) {
					chart.resize()
				}
			})
		}

		// 监听图表类型变化
		watch([trendChartType, typeChartType], () => {
			loadData()
		})

		// 返回所有需要暴露的响应式数据和方法
		return {
			// 响应式数据
			currentUser,
			loading,
			statisticsData,
			tableExpanded,
			timeRange,
			customTimeRange,
			trendChartType,
			typeChartType,
			overview,
			trendChart,
			typeChart,
			levelChart,
			efficiencyChart,
			moduleChart,
			keywordChart,

			// 方法
			loadData,
			initCharts,
			updateTrendChart,
			updateTypeChart,
			updateLevelChart,
			updateEfficiencyChart,
			updateModuleChart,
			updateKeywordChart,
			handleTimeRangeChange,
			handleCustomTimeRangeChange,
			getTimeRangeParams,
			refreshData,
			toggleTableExpand,
			handleBack,
			handleExportReport,
			handleLogout,
			getProgressColor,
			handleResize
		}
}
}
</script>

<style scoped>
/* 基础样式 */
* {
	font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
	background-color: #f0f2f5;
	color: #1a1a1a;
	margin: 0;
}

/* 容器布局 */
.app-container {
	max-width: 1440px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 240px 1fr;
	grid-template-rows: 64px 1fr;
	min-height: 100vh;
	background-color: #F5F7FA;
}

/* 顶部导航栏 */
.header {
	grid-column: 1 / -1;
	background-color: #2C5AA0;
	display: flex;
	align-items: center;
	padding: 0 24px;
}

.logo {
	font-size: 18px;
	font-weight: bold;
	color: white;
	display: flex;
	align-items: center;
	gap: 8px;
}

.flex-grow {
	flex-grow: 1;
}

.flex {
	display: flex;
}

.items-center {
	align-items: center;
}

.gap-6 {
	gap: 24px;
}

.gap-2 {
	gap: 8px;
}

/* 左侧导航栏 */
.sidebar {
	background-color: white;
	padding: 16px 0;
	border-right: 1px solid #e4e7ed;
}

.menu-item {
	padding: 12px 24px;
	color: #555;
	display: flex;
	align-items: center;
	gap: 12px;
	transition: all 0.3s;
	cursor: pointer;
}

.menu-item.active,
.menu-item:hover {
	background-color: #e8eff9;
	color: #2C5AA0;
	border-right: 3px solid #2C5AA0;
}

/* 主内容区 */
.content {
	padding: 24px;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 24px;
	overflow-y: auto;
}

.main-content-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 16px;
	border-bottom: 1px solid #e4e7ed;
}

.header-actions {
	display: flex;
	gap: 12px;
}

/* 时间范围选择器 */
.time-range-selector {
	margin-bottom: 24px;
}

.range-controls {
	display: flex;
	align-items: center;
	gap: 16px;
}

.range-label {
	font-weight: 500;
	color: #606266;
}

/* 统计概览卡片 */
.overview-cards {
	margin-bottom: 24px;
}

.overview-card {
	height: 120px;
}

.card-content {
	display: flex;
	align-items: center;
	height: 100%;
	gap: 16px;
}

.card-icon {
	width: 70px;
	height: 70px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: white;
}

.card-icon.danger {
	background: linear-gradient(135deg, #F56C6C, #F78989);
}

.card-icon.warning {
	background: linear-gradient(135deg, #E6A23C, #EEBE77);
}

.card-icon.success {
	background: linear-gradient(135deg, #67C23A, #85CE61);
}

.card-icon.info {
	background: linear-gradient(135deg, #909399, #A6A9AD);
}

.card-info {
	flex: 1;
}

.card-value {
	font-size: 28px;
	font-weight: bold;
	color: #303133;
	line-height: 1;
}

.card-label {
	font-size: 14px;
	color: #909399;
	margin-top: 4px;
}

.card-trend {
	font-size: 12px;
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.card-trend.up {
	color: #F56C6C;
}

.card-trend.down {
	color: #67C23A;
}

/* 图表容器 */
.charts-container {
	margin-bottom: 24px;
}

.chart-card {
	height: 400px;
}

.chart-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.chart {
	height: 320px;
	width: 100%;
}

/* 数据表格 */
.data-table {
	margin-bottom: 24px;
}

.table-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 头像和退出登录 */
#img-head {
	height: 40px;
	width: 40px;
	border-radius: 50px;
}

.denglu {
	color: white;
	font-size: 15px;
	text-decoration: none;
}

.denglu:hover {
	color: #F44346;
}

.text-sm {
	font-size: 14px;
}

.text-white {
	color: white;
}

/* 图标样式 */
.logo-icon {
	width: 28px;
	height: 28px;
	color: white;
	transition: transform 0.3s ease;
}

.logo:hover .logo-icon {
	transform: rotate(360deg);
}

.logout-icon {
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: middle;
	transition: transform 0.3s ease;
}

.logout-icon:hover {
	transform: translateX(2px);
}

.menu-icon {
	width: 18px;
	height: 18px;
	transition: transform 0.3s ease;
}

.menu-item:hover .menu-icon {
	transform: scale(1.1);
}

.btn-icon {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: middle;
	transition: transform 0.3s ease;
}

.btn-icon-small {
	width: 14px;
	height: 14px;
	margin-right: 4px;
	vertical-align: middle;
	transition: transform 0.3s ease;
}

:hover .btn-icon,
:hover .btn-icon-small {
	transform: scale(1.1);
}

.trend-icon {
	width: 14px;
	height: 14px;
	animation: trendPulse 2s infinite;
}

@keyframes trendPulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.7; }
}

/* Element UI 样式调整 */
.el-card {
	border: none;
	border-radius: 12px;
	overflow: hidden;
	transition: all 0.3s ease;
}

.el-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.el-button {
	border-radius: 8px;
	transition: all 0.3s ease;
}

.el-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.el-radio-group .el-radio-button__inner {
	border-radius: 8px;
	transition: all 0.3s ease;
}

.el-date-editor {
	border-radius: 8px;
}

.el-form-item {
	margin-bottom: 0;
}

.el-progress-bar__outer {
	background-color: #E4E7ED;
}

.el-table {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-table th {
	background-color: #fafafa !important;
	color: #606266;
	font-weight: 600;
}

.el-table td {
	padding: 12px 0;
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
	background-color: #f8f9fa;
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.overview-cards .el-col {
		margin-bottom: 16px;
	}

	.charts-container .el-col {
		margin-bottom: 20px;
	}
}

@media (max-width: 768px) {
	.app-container {
		grid-template-columns: 1fr;
	}

	.sidebar {
		display: none;
	}

	.header {
		padding: 0 16px;
	}

	.content {
		padding: 16px;
	}

	.range-controls {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.card-content {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}

	.card-icon {
		width: 50px;
		height: 50px;
		font-size: 20px;
	}

	.card-value {
		font-size: 24px;
	}

	.header-actions {
		flex-direction: column;
		gap: 8px;
	}

	.chart-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.chart {
		height: 280px;
	}
}
</style>